From a97c7a00ebb414b7ff7731e6bf3640f2f476aae3 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 16 Feb 2023 22:43:27 -0800 Subject: messages --- .../(app)/[username]/messages/+page.server.js | 19 ++++ src/routes/(app)/[username]/messages/+page.svelte | 126 +++++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 src/routes/(app)/[username]/messages/+page.server.js create mode 100644 src/routes/(app)/[username]/messages/+page.svelte (limited to 'src/routes/(app)/[username]/messages') diff --git a/src/routes/(app)/[username]/messages/+page.server.js b/src/routes/(app)/[username]/messages/+page.server.js new file mode 100644 index 00000000..7b651389 --- /dev/null +++ b/src/routes/(app)/[username]/messages/+page.server.js @@ -0,0 +1,19 @@ +import { get } from '$lib/utils'; + +export async function load({ params, parent, url }) { + let { user, subject } = await parent(); + let { since = 0 } = params; + + let messages = []; + + try { + messages = await get(`/${user.pubkey}/${since}/messages`); + messages = messages + .filter((m) => m.recipient.id === subject.id || m.author.id === subject.id) + .sort((a, b) => a.created_at - b.created_at); + } catch (e) { + console.log(`failed to fetch nostr messages`, e); + } + + return { messages, user }; +} diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte new file mode 100644 index 00000000..f8f64aea --- /dev/null +++ b/src/routes/(app)/[username]/messages/+page.svelte @@ -0,0 +1,126 @@ + + +
+ {#if messages.length && ready} +
+ {#each messages as event} + {@const ours = event.pubkey === user.pubkey} + {@const theirs = !ours} +
+
+ {#await decrypt({ event, user })} + - + {:then message} + {message} + {/await} +
+
+ +
+
+
+ {format(new Date(event.created_at * 1000), 'MMM d')}, + {format(new Date(event.created_at * 1000), 'h:mm aa')} +
+ {/each} +
+ {/if} + +
+ + + + +
+
+ + -- cgit v1.2.3 From 9da8032e91798639131656a2504b86a6f9c40694 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 17 Feb 2023 11:29:01 -0800 Subject: message styles --- src/routes/(app)/[username]/(profile)/+page.svelte | 24 +++++++-- src/routes/(app)/[username]/messages/+page.svelte | 63 ++++++++++++---------- src/routes/(app)/send/[...text]/+page.svelte | 2 +- 3 files changed, 58 insertions(+), 31 deletions(-) (limited to 'src/routes/(app)/[username]/messages') diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte index bc19a9df..4d4f3b13 100644 --- a/src/routes/(app)/[username]/(profile)/+page.svelte +++ b/src/routes/(app)/[username]/(profile)/+page.svelte @@ -4,6 +4,7 @@ import { t } from '$lib/translations'; import { f, sat, sats } from '$lib/utils'; import { sign, send, encrypt, decrypt } from '$lib/nostr'; + import { event as e, password } from '$lib/store'; import { browser } from '$app/environment'; export let data; @@ -13,8 +14,25 @@ let latest = []; let i = 0; - onMount(async () => { - if (!browser) return; + e.subscribe(async (event) => { + if (event?.recipient.id === user.id && !~latest.findIndex((m) => m.id === event.id)) { + event.content = await decrypt({ event, user }); + + let i = latest.findIndex((m) => m.pubkey === event.pubkey); + + if (~i) latest.splice(i, 1); + else latest.pop(); + + console.log(latest); + latest.unshift(event); + + latest = latest; + } + }); + + $: initialize($password); + let initialize = async (p) => { + if (!p) return; while (latest.length < 3 && i < messages.length) { let event = messages[i]; let k = event.author.id === user.id ? event.recipient.pubkey : event.author.pubkey; @@ -27,7 +45,7 @@ } latest = latest; - }); + };
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte index f8f64aea..397d07ac 100644 --- a/src/routes/(app)/[username]/messages/+page.svelte +++ b/src/routes/(app)/[username]/messages/+page.svelte @@ -2,7 +2,7 @@ import { browser } from '$app/environment'; import { t } from '$lib/translations'; import { format, parseISO } from 'date-fns'; - import { scale } from 'svelte/transition'; + import { scale, fade } from 'svelte/transition'; import { enhance } from '$app/forms'; import { Avatar, Icon } from '$comp'; import { back, fail, focus } from '$lib/utils'; @@ -14,18 +14,24 @@ export let data; let { messages, subject, user } = data; - let input, pane, ready; + let input, pane; $: initialize($password); let initialize = async (p) => { if (!p) return; - ready = true; + await Promise.all( + messages.map(async (event) => (event.message = await decrypt({ event, user }))) + ); + + messages = messages; tick().then(() => pane && (pane.scrollTop = pane.scrollHeight)); }; - e.subscribe((ev) => { - if (ev?.recipient.id === user.id && !~messages.findIndex((m) => m.id === ev.id)) { - messages.push(ev); + e.subscribe(async (event) => { + let found = ~messages.findIndex((m) => m.id === event?.id); + if (event?.recipient.id === user.id && !found) { + event.message = await decrypt({ event, user }); + messages.push(event); messages = messages; tick().then(() => pane && (pane.scrollTop = pane.scrollHeight)); } @@ -58,6 +64,7 @@ sent = true; } catch (e) { + console.log(e); fail('Failed to send message'); } @@ -67,38 +74,40 @@
- {#if messages.length && ready} -
- {#each messages as event} - {@const ours = event.pubkey === user.pubkey} - {@const theirs = !ours} -
+
+ {#each messages as { id, author, message, created_at, pubkey }} + {@const ours = pubkey === user.pubkey} + {@const theirs = !ours} + + {#if message} +
- {#await decrypt({ event, user })} - - - {:then message} - {message} - {/await} + {message}
- +
- {format(new Date(event.created_at * 1000), 'MMM d')}, - {format(new Date(event.created_at * 1000), 'h:mm aa')} + {format(new Date(created_at * 1000), 'MMM d')}, + {format(new Date(created_at * 1000), 'h:mm aa')}
- {/each} -
- {/if} + {/if} + {/each} +
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte index 5a376f9f..5f37cad5 100644 --- a/src/routes/(app)/send/[...text]/+page.svelte +++ b/src/routes/(app)/send/[...text]/+page.svelte @@ -99,7 +99,7 @@
{#each contacts as c} -
+
-- cgit v1.2.3 From 152abe4cecf9447f90ebc4c665fa0595630c874f Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 17 Feb 2023 12:17:42 -0800 Subject: tweak --- src/routes/(app)/[username]/messages/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/routes/(app)/[username]/messages') diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte index 397d07ac..1e0336f3 100644 --- a/src/routes/(app)/[username]/messages/+page.svelte +++ b/src/routes/(app)/[username]/messages/+page.svelte @@ -75,7 +75,7 @@
{#each messages as { id, author, message, created_at, pubkey }} -- cgit v1.2.3 From 50f9c3c71a598ce10ad3191155b2cca25cfbf7b2 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 17 Feb 2023 12:32:49 -0800 Subject: animate --- src/routes/(app)/[username]/messages/+page.svelte | 38 +++++++++++++++++++---- 1 file changed, 32 insertions(+), 6 deletions(-) (limited to 'src/routes/(app)/[username]/messages') diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte index 1e0336f3..a6b7005f 100644 --- a/src/routes/(app)/[username]/messages/+page.svelte +++ b/src/routes/(app)/[username]/messages/+page.svelte @@ -1,8 +1,9 @@ -
+
- + - - - +
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte index aacba81e..a502f8c3 100644 --- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte +++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte @@ -1,7 +1,7 @@